<template>
  <div class="progress-track-container">
    <!-- 搜索表单 -->
    <el-form :model="searchForm" ref="searchFormRef" :inline="true" class="search-form">
      <el-form-item label="工单编号" prop="workOrderNo">
        <el-input v-model="searchForm.workOrderNo" placeholder="请输入工单编号" clearable />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input v-model="searchForm.productName" placeholder="请输入产品名称" clearable />
      </el-form-item>
      <el-form-item label="生产状态" prop="status">
        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 180px">
          <el-option label="未开始" value="NOT_STARTED" />
          <el-option label="生产中" value="IN_PROGRESS" />
          <el-option label="已完成" value="COMPLETED" />
          <el-option label="已暂停" value="PAUSED" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" v-loading="loading" border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="workOrderNo" label="工单编号" />
      <el-table-column prop="productName" label="产品名称" />
      <el-table-column prop="plannedQuantity" label="计划数量" />
      <el-table-column prop="completedQuantity" label="完成数量" />
      <el-table-column prop="progress" label="完成进度" width="150">
        <template #default="scope">
          <div class="progress-container">
            <el-progress 
              :percentage="scope.row.progressPercentage" 
              :color="getProgressColor(scope.row.progressPercentage)"
              :show-text="false"
            />
            <span class="progress-text">{{ scope.row.progressPercentage }}%</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="currentStep" label="当前工序" />
      <el-table-column prop="status" label="生产状态">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" />
      <el-table-column prop="estimatedEndTime" label="预计完成时间" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button type="primary" link :icon="View" @click="handleViewDetail(scope.row)">查看详情</el-button>
          <el-button type="success" link :icon="TrendCharts" @click="handleViewChart(scope.row)">进度图表</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <!-- 进度详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="生产进度详情" width="80%">
      <div class="detail-content">
        <!-- 工单基本信息 -->
        <el-card class="info-card" shadow="never">
          <template #header>
            <span class="card-title">工单信息</span>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="工单编号">{{ selectedOrder.workOrderNo }}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{ selectedOrder.productName }}</el-descriptions-item>
            <el-descriptions-item label="计划数量">{{ selectedOrder.plannedQuantity }}</el-descriptions-item>
            <el-descriptions-item label="已完成数量">{{ selectedOrder.completedQuantity }}</el-descriptions-item>
            <el-descriptions-item label="完成进度">{{ selectedOrder.progressPercentage }}%</el-descriptions-item>
            <el-descriptions-item label="生产状态">
              <el-tag :type="getStatusType(selectedOrder.status)">{{ getStatusText(selectedOrder.status) }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 工序进度 -->
        <el-card class="process-card" shadow="never">
          <template #header>
            <span class="card-title">工序进度</span>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(step, index) in processSteps"
              :key="index"
              :timestamp="step.completedTime"
              :type="getStepType(step.status)"
              :icon="getStepIcon(step.status)"
            >
              <div class="step-content">
                <h4>{{ step.stepName }}</h4>
                <p>{{ step.description }}</p>
                <div class="step-progress">
                  <el-progress 
                    :percentage="step.progress" 
                    :status="step.status === 'COMPLETED' ? 'success' : step.status === 'ERROR' ? 'exception' : ''"
                  />
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="progressTrack">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { View, TrendCharts, Check, Clock, Warning } from "@element-plus/icons-vue";

const loading = ref(false);
const tableData = ref([]);
const searchFormRef = ref<FormInstance>();
const detailDialogVisible = ref(false);

// 查询表单
const searchForm = reactive({
  workOrderNo: "",
  productName: "",
  status: ""
});

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 选中的工单
const selectedOrder = ref<any>({});

// 工序步骤数据
const processSteps = ref([
  {
    stepName: "原料准备",
    description: "准备生产所需原材料",
    progress: 100,
    status: "COMPLETED",
    completedTime: "2024-01-15 09:00"
  },
  {
    stepName: "加工成型",
    description: "对原材料进行加工成型",
    progress: 80,
    status: "IN_PROGRESS",
    completedTime: ""
  },
  {
    stepName: "质量检测",
    description: "对加工产品进行质量检测",
    progress: 0,
    status: "PENDING",
    completedTime: ""
  },
  {
    stepName: "包装入库",
    description: "产品包装并入库",
    progress: 0,
    status: "PENDING",
    completedTime: ""
  }
]);

// 获取进度条颜色
const getProgressColor = (progress: number) => {
  if (progress < 30) return '#f56c6c';
  if (progress < 70) return '#e6a23c';
  return '#67c23a';
};

// 获取状态类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    NOT_STARTED: "info",
    IN_PROGRESS: "primary",
    COMPLETED: "success",
    PAUSED: "warning",
    ERROR: "danger"
  };
  return statusMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    NOT_STARTED: "未开始",
    IN_PROGRESS: "生产中",
    COMPLETED: "已完成",
    PAUSED: "已暂停",
    ERROR: "异常"
  };
  return statusMap[status] || status;
};

// 获取步骤类型
const getStepType = (status: string) => {
  const typeMap: Record<string, string> = {
    COMPLETED: "success",
    IN_PROGRESS: "primary",
    ERROR: "danger",
    PENDING: "info"
  };
  return typeMap[status] || "info";
};

// 获取步骤图标
const getStepIcon = (status: string) => {
  const iconMap: Record<string, any> = {
    COMPLETED: Check,
    IN_PROGRESS: Clock,
    ERROR: Warning,
    PENDING: Clock
  };
  return iconMap[status] || Clock;
};

// 获取表格数据
const getTableData = async () => {
  loading.value = true;
  try {
    // TODO: 调用API获取生产进度追踪数据
    console.log("获取生产进度追踪数据");
  } catch (error) {
    console.error("获取生产进度追踪数据失败:", error);
    ElMessage.error("获取生产进度追踪数据失败");
  } finally {
    loading.value = false;
  }
};

// 查询
const handleSearch = () => {
  pagination.currentPage = 1;
  getTableData();
};

// 重置
const handleReset = () => {
  if (!searchFormRef.value) return;
  searchFormRef.value.resetFields();
  pagination.currentPage = 1;
  getTableData();
};

// 分页大小改变
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  getTableData();
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  getTableData();
};

// 查看详情
const handleViewDetail = (row: any) => {
  selectedOrder.value = row;
  detailDialogVisible.value = true;
};

// 查看图表
const handleViewChart = (row: any) => {
  ElMessage.info("查看进度图表功能待实现");
};

// 页面加载时获取数据
onMounted(() => {
  getTableData();
});
</script>

<style scoped>
.progress-track-container {
  padding: 20px;
}

.search-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-text {
  font-size: 12px;
  color: #606266;
  min-width: 35px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.detail-content {
  max-height: 600px;
  overflow-y: auto;
}

.info-card, .process-card {
  margin-bottom: 20px;
}

.card-title {
  font-weight: 600;
  font-size: 16px;
}

.step-content h4 {
  margin: 0 0 8px 0;
  color: #303133;
}

.step-content p {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
}

.step-progress {
  width: 200px;
}
</style>